<template>
  <div class="app-container" style="position:relative">
    <div style="position:absolute;width:calc(100% - 40px);z-index:999;">
      <el-menu
        v-show="dropdown"
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="width:100%"
      >
        <el-menu-item index="1">点位图</el-menu-item>
        <el-submenu index="2">
          <template slot="title">聚合图</template>
          <el-menu-item index="2-1">全部</el-menu-item>
          <el-menu-item index="2-2">开机</el-menu-item>
          <el-menu-item index="2-3">关机</el-menu-item>
        </el-submenu>
        <el-menu-item index="3">热力图</el-menu-item>
      </el-menu>
      <div @click="dropChange" class="drop-icon">
        <i class="el-icon-d-arrow-right"></i>
      </div>
    </div>
    <div id="allmap" v-show="location"></div>
    <div id="aggregate-map" v-show="aggregate"></div>
    <div id="aggregate-map1" v-show="aggregate1"></div>
    <div id="aggregate-map2" v-show="aggregate2"></div>
    <div id="heat-map" v-show="heat"></div>
  </div>
</template>

<script>
export default {
  name: "CentraList",
  data() {
    return {
      activeIndex2: "1",
      location: true,
      aggregate: false,
      aggregate1: false,
      aggregate2: false,
      heat: false,
      dropdown: true
    };
  },
  created() {
    this.getMapData("location");
  },
  methods: {
    dropChange() {
      console.log("click");
      if (this.dropdown === false) {
        this.dropdown = true;
      } else {
        this.dropdown = false;
      }
    },
    handleSelect(data) {
      if (data === "1") {
        this.location = true;
        this.aggregate = false;
        this.aggregate1 = false;
        this.aggregate2 = false;
        this.heat = false;
        this.getMapData("location");
      } else if (data === "2-1") {
        this.aggregate = true;
        this.aggregate1 = false;
        this.aggregate2 = false;
        this.location = false;
        this.heat = false;
        this.getMapData("aggregate");
      } else if (data === "2-2") {
        this.aggregate1 = true;
        this.aggregate = false;
        this.aggregate2 = false;
        this.location = false;
        this.heat = false;
        this.getMapData("aggregate1");
      } else if (data === "2-3") {
        this.aggregate2 = true;
        this.aggregate = false;
        this.aggregate1 = false;
        this.location = false;
        this.heat = false;
        this.getMapData("aggregate2");
      } else if (data === "3") {
        this.heat = true;
        this.location = false;
        this.aggregate = false;
        this.aggregate1 = false;
        this.aggregate2 = false;
        this.getMapData("heat", "hotspot");
      }
    },
    getMapData(mes, type = "") {
      const data = {
        code: "10",
        returnType: mes
      };
      if (type) {
        data["type"] = type;
      }
      const getCentraDataPath = {
        company: "STQ",
        api: "pc_CentraScreen_getAllData",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(getCentraDataPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },

    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (
            resj.api === "pc_CentraScreen_getAllData" &&
            resj.type === "location"
          ) {
            // 点位图
            var data_info = resj.data;

            // 百度地图API功能
            let map = new BMap.Map("allmap", { enableMapClick: false });
            map.centerAndZoom(new BMap.Point(116.417854, 39.921988), 6);
            map.enableScrollWheelZoom(true);
            map.addControl(new BMap.ScaleControl()); // 比例尺
            map.addControl(new BMap.OverviewMapControl()); // 缩略地图
            // map.setCurrentCity("厦门"); // 设置地图显示的城市 此项是必须设置的
            // 编写自定义函数,创建标注
            var that = this;
            function addMarker(point, id) {
              var marker = new BMap.Marker(point);
              map.addOverlay(marker);

              marker.addEventListener("click", function() {
                const getCentraDataPath = {
                  company: "STQ",
                  api: "pc_CentraScreen_getDetails",
                  version: "1.0",
                  data: {
                    id: id
                  }
                };
                that.socketApi.sendSock(
                  JSON.stringify(getCentraDataPath),
                  res => {
                    if (res) {
                      var equipment = JSON.parse(res);
                      if ((equipment.api = "pc_CentraScreen_getDetails")) {
                        var mes =
                          "<p style='font-size:14px;'>商家:" +
                          equipment.data.merchant_name +
                          "</p><p style='font-size:14px;'>商圈:" +
                          equipment.data.circle_name +
                          "</p><p style='font-size:14px;'>设备名称:" +
                          equipment.data.name +
                          "</p>";
                        if (equipment.data.maintain_mobile) {
                          mes +=
                            "<p style='font-size:14px;'>安装人:" +
                            equipment.data.maintain_mobile +
                            "</p>";
                        }
                        mes +=
                          "<p style='font-size:14px;'>详细地址:" +
                          equipment.data.install_site +
                          "</p>";
                        var infoWindow = new BMap.InfoWindow(mes);
                        this.openInfoWindow(infoWindow);
                      }
                    }
                  }
                );
              });
            }
            // 地图显示广告机位置信息
            var bounds = map.getBounds();
            var sw = bounds.getSouthWest();
            var ne = bounds.getNorthEast();
            var lngSpan = Math.abs(sw.lng - ne.lng);
            var latSpan = Math.abs(ne.lat - sw.lat);
            for (var i = 0; i < data_info.length; i++) {
              if (data_info[i].equipment_status === 1) {
                var myIcons = new BMap.Icon(
                  "./images/marker_green_sprite.png",
                  new BMap.Size(23, 25),
                  { anchor: new BMap.Size(10, 25) }
                );
              } else {
                var myIcons = new BMap.Icon(
                  "./images/marker_red_sprite.png",
                  new BMap.Size(23, 25),
                  { anchor: new BMap.Size(10, 25) }
                );
              }
              var point = new BMap.Point(
                parseFloat(parseFloat(data_info[i].longitude).toFixed(6)),
                parseFloat(parseFloat(data_info[i].latitude).toFixed(6))
              );
              addMarker(point, data_info[i].id);
            }
          } else if (
            resj.api === "pc_CentraScreen_getAllData" &&
            resj.type === "aggregate"
          ) {
            var point = resj.data;
            // 百度地图API功能
            var map = new BMap.Map("aggregate-map");
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
            map.enableScrollWheelZoom();
            var pt = null;
            var markers = [];
            for (var i = 0; i < point.length; i++) {
              if (point[i].longitude && point[i].latitude) {
                pt = new BMap.Point(
                  parseFloat(parseFloat(point[i].longitude).toFixed(6)),
                  parseFloat(parseFloat(point[i].latitude).toFixed(6))
                );
                if (point[i].equipment_status === 1) {
                  var myIcons = new BMap.Icon(
                    require("./marker_green_sprite.png"),
                    new BMap.Size(23, 25),
                    { anchor: new BMap.Size(10, 25) }
                  );
                } else {
                  var myIcons = new BMap.Icon(
                    require("./marker_green_sprite.png"),
                    new BMap.Size(23, 25),
                    { anchor: new BMap.Size(10, 25) }
                  );
                }
                markers.push(new BMap.Marker(pt, { icon: myIcons }));
              }
            }
            console.log("markers1", markers);
            //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
            var markerClusterer = new BMapLib.MarkerClusterer(map, {
              markers: markers
            });
          } else if (
            resj.api === "pc_CentraScreen_getAllData" &&
            resj.type === "aggregate1"
          ) {
            var point = resj.data;
            // 百度地图API功能
            var map = new BMap.Map("aggregate-map1");
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
            map.enableScrollWheelZoom();
            var pt = null;
            var markers = [];
            for (var i = 0; i < point.length; i++) {
              if (
                point[i].longitude &&
                point[i].latitude &&
                point[i].equipment_status === 1
              ) {
                pt = new BMap.Point(
                  parseFloat(parseFloat(point[i].longitude).toFixed(6)),
                  parseFloat(parseFloat(point[i].latitude).toFixed(6))
                );
                if (point[i].equipment_status === 1) {
                  var myIcons = new BMap.Icon(
                    require("./marker_green_sprite.png"),
                    new BMap.Size(23, 25),
                    { anchor: new BMap.Size(10, 25) }
                  );
                }
                markers.push(new BMap.Marker(pt, { icon: myIcons }));
              }
            }
            //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
            var markerClusterer = new BMapLib.MarkerClusterer(map, {
              markers: markers
            });
          } else if (
            resj.api === "pc_CentraScreen_getAllData" &&
            resj.type === "aggregate2"
          ) {
            var point = resj.data;
            // 百度地图API功能
            var map = new BMap.Map("aggregate-map2");
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
            map.enableScrollWheelZoom();
            var pt = null;
            var markers = [];
            for (var i = 0; i < point.length; i++) {
              if (
                point[i].longitude &&
                point[i].latitude &&
                point[i].equipment_status === 2
              ) {
                pt = new BMap.Point(
                  parseFloat(parseFloat(point[i].longitude).toFixed(6)),
                  parseFloat(parseFloat(point[i].latitude).toFixed(6))
                );
                markers.push(new BMap.Marker(pt, { icon: myIcons }));
              }
            }
            //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
            var markerClusterer = new BMapLib.MarkerClusterer(map, {
              markers: markers
            });
          } else if (
            resj.api === "pc_CentraScreen_getAllData" &&
            resj.type === "heat"
          ) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("heat-map"));

            // 指定图表的配置项和数据
            var app = {};
            app.title = "热力图与百度地图扩展";
            const mapData = [];
            resj.data.forEach(element => {
              mapData.push([
                {
                  coord: [element.longitude, element.latitude],
                  elevation: element.maximun
                }
              ]);
            });
            const data = mapData;
            var points = [].concat.apply(
              [],
              data.map(function(track) {
                return track.map(function(seg) {
                  return seg.coord.concat([1]);
                });
              })
            );
            let option = "";
            myChart.setOption(
              (option = {
                animation: false,
                bmap: {
                  center: [110.13066322374, 30.240018034923], // 当前视角中心位置的坐标
                  zoom: 6, // 表示默认情况下地图缩放级别
                  roam: true // 表示用户是否可以拖放和缩放地图
                },
                visualMap: {
                  show: false,
                  top: "top",
                  min: 0,
                  max: 5,
                  seriesIndex: 0,
                  calculable: true,
                  inRange: {
                    color: ["blue", "blue", "green", "yellow", "red"]
                  }
                },
                series: [
                  {
                    type: "heatmap",
                    coordinateSystem: "bmap",
                    data: points,
                    pointSize: 5,
                    blurSize: 6
                  }
                ]
              })
            );
            if (!app.inNode) {
              // 添加百度地图插件
              var bmap = myChart
                .getModel()
                .getComponent("bmap")
                .getBMap();
              bmap.addControl(
                new BMap.MapTypeControl({
                  mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP]
                })
              );
            }
          }
        }
      }
    }
  }
};
</script>
<style scoped>
.app-container {
  width: 100%;
  height: calc(100vh - 50px);
}
#allmap,
#aggregate-map,
#aggregate-map1,
#aggregate-map2,
#heat-map {
  width: 100%;
  height: 100%;
}
.drop-icon {
  width: 100%;
  height: 20px;
  background-color: rgb(84, 92, 100, 0.5);
  text-align: center;
}
.drop-icon i {
  color: #fff;
  /* Safari */
  -webkit-transform: rotate(90deg);
  /* Firefox */
  -moz-transform: rotate(90deg);
}
</style>